<template>
  <div id="voteDetail">
    <div class="detail-content">
      <div class="row">
        <strong>发布人：</strong>
        <p>{{votelDetail.publisher}}</p>
      </div>
      <div class="row">
        <strong>投票类型：</strong>
        <p v-if="votelDetail.genre == 0">单项表决</p>
        <p v-if="votelDetail.genre == 1">多选一表决</p>
        <p v-if="votelDetail.genre == 2">选举表决</p>
      </div>
      <div class="row">
        <strong>表决通过条件：</strong>
        <p v-if="votelDetail.vote_per == 0">双过半</p>
        <p v-if="votelDetail.vote_per == 1">双过三分之二</p>
      </div>
      <div class="row">
        <strong>是否延长投票时间：</strong>
        <p v-if="votelDetail.moretime == 0">不延长投票时间</p>
        <p v-if="votelDetail.moretime == 1">到期未达标自动延长1天</p>
        <p v-if="votelDetail.moretime == 2">到期未达标自动延长2天</p>
        <p v-if="votelDetail.moretime == 3">到期未达标自动延长3天</p>
      </div>
      <div class="row">
        <strong>弃权票是否计为多数票：</strong>
        <p v-if="votelDetail.w_m == 0">否</p>
        <p v-if="votelDetail.w_m == 1">是</p>
      </div>
      <div class="row">
        <strong>投票开始时间：</strong>
        <p>{{votelDetail.createtime}}</p>
      </div>
      <div class="row">
        <strong>投票结束时间：</strong>
        <p>{{votelDetail.endtime}}</p>
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <strong>任职开始时间：</strong>
        <p>{{votelDetail.servingcreatetime}}</p>
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <strong>任职结束时间：</strong>
        <p>{{votelDetail.servingendtime}}</p>
      </div>
      <div class="h1-wrap">
        <h1>{{votelDetail.title}}</h1>
      </div>
      <div class="row-content">
        <p v-html="votelDetail.content"></p>
      </div>

      <div class="row-img">
        <img
          :src="img"
          v-for="(img,index) in votelDetail.images"
          :key="index"
          alt="i业主"
          :preview="index"
          preview-text
        />
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <p class="tip">以下候选人按报名时间顺序排序</p>
      </div>
    </div>
    <div class="vote-item" v-for="(item,index) in votelDetail.pedataleList" :key="index">
      <div class="person-type">
        <div class="type">
          <span v-if="item.genre == 0">业主委员会参选人</span>
          <span v-if="item.genre == 1">业主监事会参选人</span>
        </div>
        <div class="status">
          <span class="em" v-if="item.statusll == 1">未审核</span>
          <span class="ag" v-if="item.statusll == 2">审核通过</span>
          <span class="not" v-if="item.statusll == 3">审核不通过</span>
        </div>
      </div>
      <div class="top">
        <div class="img-wrap">
          <img :src="item.img" alt />
        </div>
        <div class="info-wrap">
          <p>
            <span>产权人：</span>
            {{item.name}} {{item.sex}} {{item.age}}岁 {{item.professional}} {{item.political}}
          </p>
          <p>
            <span>参选人累计专有面积：</span>
            {{item.size}}平方米
          </p>
          <p>
            <span>工作单位：</span>
            {{item.work}}
          </p>
        </div>
      </div>
      <div class="bottom">
        <p>
          <span>所在行业：</span>
          {{item.industry}}
        </p>
        <p>
          <span>个人专长：</span>
          {{item.specialty}}
        </p>
        <p>
          <span>履职擅长：</span>
          {{item.wish}}
        </p>
        <p>
          <span>履职想法和建议：</span>
          {{item.advice}}
        </p>
      </div>
      <div class="nopass-row-img" v-if="item.statusll == 3">
        <p class="tip">审核不通过原因：</p>
        <img
          :src="img"
          v-for="(img,index) in item.note_nopass"
          :key="index"
          alt="i业主"
          :preview="index"
          preview-text
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, Button, Toast } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },

  name: "voteDetail",
  data() {
    return {
      votelDetail: {}
    };
  },

  methods: {
    // 获取列表
    getVoteDetailsBj() {
      let params = {
        bid: this.$route.query.bid,
        tid: this.$store.state.userInfo.id,
        qid: this.$store.state.residentialType.qid,
        signup_id: this.$route.query.signup_id
      };
      https
        .fetchPost(config.getVoteDetailsBj, params)
        .then(res => {
          if (res.data.code == 1) {
            let votelDetail = Object.assign(
              res.data.data.votelList,
              res.data.data.parameter
            );
            if (votelDetail.images != "") {
              let str = votelDetail.images.substr(
                0,
                votelDetail.images.length - 1
              );
              let imgs = str.split(";");
              let arr = [];
              imgs.forEach(item => {
                if (item != "") {
                  console.log(item);
                  if (item.indexOf("sqyzdh.com") == -1) {
                    let str = "https://mz.sqyzdh.com" + item;
                    arr.push(str);
                  } else {
                    arr.push(item);
                  }
                }
              });
              votelDetail.images = arr;
              this.$previewRefresh();
            }
            votelDetail.pedataleList.forEach(item => {
              if (item.note_nopass != "") {
                let str1 = item.note_nopass.substr(
                  0,
                  item.note_nopass.length - 1
                );
                let imgs1 = str1.split(";");
                let arr1 = [];
                imgs1.forEach(img => {
                  if (img != "") {
                    if (item.indexOf("sqyzdh.com") == -1) {
                      let str = "https://mz.sqyzdh.com" + img;
                      arr.push(str);
                    } else {
                      arr.push(img);
                    }
                  }
                });
                item.note_nopass = arr1;
                this.$previewRefresh();
              }
            });
            votelDetail.createtime = this.dataFormat(
              votelDetail.createtime * 1000,
              1
            );
            votelDetail.endtime = this.dataFormat(
              votelDetail.endtime * 1000,
              1
            );
            votelDetail.servingcreatetime = this.dataFormat(
              votelDetail.servingcreatetime * 1000,
              1
            );
            votelDetail.servingendtime = this.dataFormat(
              votelDetail.servingendtime * 1000,
              1
            );
            console.log(votelDetail);
            this.votelDetail = votelDetail;
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    }
  },
  created() {
    this.getVoteDetailsBj();
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
.pswp {
  z-index: 99999;
}
#voteDetail {
  overflow: auto;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background: #f2f2f2;

  padding-top: 20px;
  .detail-content {
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    margin-bottom: 20px;
    background: #fff;
    .h1-wrap {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      h1 {
        font-size: 32px;
        font-weight: 600;
        line-height: 50px;
        display: block;
        padding-bottom: 25px;
      }
    }
    .row-content {
      text-align: center;
      padding-top: 20px;
      font-size: 26px;
      color: #666;
      line-height: 40px;
      padding-right: 10px;
      margin-bottom: 20px;
      border-top: 1px dashed #ccc;
    }
    .row {
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #666;
      line-height: 40px;
      padding-right: 10px;
      margin-bottom: 10px;
      strong {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 30px;
        height: 50px;
        color: #444;
        font-weight: 600;
        &::before {
          content: "";
          display: block;
          height: 35px;
          border-left: 6px solid $themeGold;
          margin-right: 20px;
        }
      }
      .tip {
        color: #999;
        margin-top: 10px;
        font-size: 24px;
      }
    }
    .row-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      .tip {
        font-size: 24px;
        color: #e22c1f;
        width: 600px;
      }
      img {
        display: block;
        width: 600px;
        margin: 10px auto 15px;
        border-radius: 12px;
        border: 1px solid #f2f2f2;
      }
    }
  }
  .vote-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    background: #fff;
    padding: 20px 30px;
    .person-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26px;
      color: #666;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: 20px;
      .status {
        font-weight: normal;
        font-size: 28px;

        .ag {
          color: #2f86f6;
        }
        .not {
          color: rgb(226, 11, 11);
        }
        .em {
          color: #999;
        }
      }
    }
    .top {
      display: flex;
      // align-items: center;
      font-size: 26px;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 20px;
      .img-wrap {
        display: flex;
        justify-content: center;
        width: 150px;
        height: 150px;
        overflow: hidden;
        border-radius: 14px;
        img {
          height: 150px;
        }
      }
      .info-wrap {
        width: 560px;
        padding-left: 20px;
        p {
          line-height: 38px;
          color: #555;
          margin-top: 10px;
          span {
            font-size: 28px;
            color: #2f86f6;
          }
        }
      }
    }
    .bottom {
      padding-top: 10px;
      p {
        font-size: 26px;
        color: #444;
        line-height: 38px;
        margin-bottom: 10px;
        span {
          font-size: 26px;
          color: #2f86f6;
        }
      }
    }
    .nopass-row-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      .tip {
        font-size: 28px;
        color: #e22c1f;
        padding: 0 30px;
        width: 100%;
        margin-bottom: 20px;
      }
      img {
        display: block;
        width: 600px;
        margin: 10px auto 15px;
        border-radius: 12px;
        border: 1px solid #f2f2f2;
      }
    }
    .btn-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .btn {
        width: 250px;
        margin: 0 20px;
        z-index: 0 !important;
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-top: 20px;
      height: 50px;
      color: #999;
      span {
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
  }
  .one-vote-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px 30px;
    .btn-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
      .btn {
        width: 250px;
        margin: 0 20px;
        z-index: 0 !important;
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-top: 20px;
      height: 50px;
      color: #999;
      span {
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
  }
  .return-wrap {
    background: #fff;
    padding: 15px 0;
    .op-title {
      display: flex;
      align-items: center;
      font-size: 28px;
      color: #444;
      line-height: 50px;
      padding-left: 30px;
      margin-top: 20px;
      span {
        color: #e22c1f;
      }
      &::before {
        content: "";
        display: block;
        height: 35px;
        border-left: 6px solid $themeGold;
        margin-right: 20px;
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin: 20px 0;
      height: 50px;
      color: #999;
      span {
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
    .tip {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      height: 50px;
      color: #999;
      span {
        margin: 0 10px;
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
  }
  //  <!-- 验证密码 -->
  .verify-vote-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 990 !important;
    background: rgba(0, 0, 0, 0.6);
    .error-text {
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 26px;
      color: #fff;
      text-align: center;
      background: #e22c1f;
    }
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 560px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 32px;
        color: #333;
        padding-bottom: 50px;
        padding-top: 20px;
      }
      .tip {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        height: 60px;
        width: 350px;
        padding: 0 30px;
        color: rgb(226, 11, 11);
      }
      .sel-items {
        display: flex;
        justify-content: center;
        input {
          border: none;
          outline: none;
          width: 350px;
          height: 60px;
          font-size: 30px;
          color: #444;
          background: #f9f9f9;
          padding: 0 20px;
        }
      }
      .modify-password {
        text-align: right;
        color: #2f86f6;
        font-size: 24px;
        padding: 30px 0;
        span {
          padding: 10px;
        }
      }
      .btn-block {
        display: flex;
        border-top: 1px solid #f1f1f1;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 100px;
          color: #2f86f6;
          font-size: 30px;
          &.cancel {
            color: #999;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 20px;
              right: 0;
              width: 1px;
              height: 60px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
  }
  .comfirn-btn {
    padding: 40px 240px 80px;
  }
}
</style>
